<div>

    <div class="breadcrumb">
        <a class="prev" routerLink="/basicSetting/recharge"></a>
        <a class="next"></a>
    </div>
    <div nz-row class="my-tab-hed">
        <h3 nz-col nzSpan="12">{{'recharge.title'|translate}}</h3>
    </div>
    <form nz-form [nzLayout]='inline' class="org-register-one" [formGroup]="validateForm">
        <div nz-row [nzGutter]="24" class="my-add-form-item">
			<div nz-col [nzSpan]="16" >
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="displayPriority" nzRequired>{{'recharge.username'|translate}}</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('userId')">
						<nz-select
						nzShowSearch
						nzServerSearch
						nzPlaceHolder="{{'recharge.usernameP'|translate}}"
						formControlName="userId"
						[nzShowArrow]="false"
						nzAllowClear
						(nzOnSearch)="search($event)"
						style="width:200px;"
						(ngModelChange)="change($event)"
						>
						<nz-option nzCustomContent *ngFor="let o of datalist" [nzLabel]="o.loginId" [nzValue]="o.id">
							<p style="font-size: 18px;margin-bottom: 0;">{{o.loginId}}</p>
							<p style="font-size: 12px;color: #bbb;margin-bottom: 0;">{{o.email}}</p>
						</nz-option>
						</nz-select>
						<a style="margin-left:10px;" (click)="userDetail()">{{'recharge.username2'|translate}}</a>
                    </nz-form-control>
                </nz-form-item>
			</div>
			<div nz-col [nzSpan]="16" >
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="8" nzFor="amount" nzRequired>{{'recharge.amount'|translate}}(¥)</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('amount')">
                        <input nz-input id="amount" style="width:200px;" formControlName="amount" placeholder="{{'placeholder.input'|translate}}{{'recharge.bonusAmount'|translate}}" />
                    </nz-form-control>
                </nz-form-item>
			</div>
			<div nz-col [nzSpan]="16" >
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="8" nzFor="bonusAmount" nzRequired>{{'recharge.bonusAmount'|translate}}(¥)</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('bonusAmount')">
                        <input nz-input id="bonusAmount" style="width:200px;" formControlName="bonusAmount" placeholder="{{'recharge.bonusAmountP'|translate}}" />
                    </nz-form-control>
                </nz-form-item>
            </div>
		</div>
        <button nz-button class="form-button" [nzType]="'primary'" (click)="submit()"
            [disabled]='validateForm.invalid'>{{'cz.submit'|translate}}</button>
        <button nz-button style="background: #EAEAEA;color: #333333;margin-left: 20px;" class="form-button"
            routerLink="/basicSetting/recharge">{{'cz.cancel'|translate}}</button>
	</form>
	<nz-modal nzWidth='900' [(nzVisible)]="isVisible" (nzOnCancel)="handleCancel()" [nzMaskClosable]="true" [nzFooter]="null" nzTitle="{{'recharge.userdetail'|translate}}">

        <div class="gutter-example">
            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row " nzSpan="8">
                    <span>{{'user.id'|translate}}:</span> {{datalist[0]?.id}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'user.loginId'|translate}}:</span> {{datalist[0]?.loginId}}
				</div>
				<div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'user.email'|translate}}:</span> {{datalist[0]?.email}}
                </div>
            </div>

            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'user.availableBalance'|translate}}:</span> {{datalist[0]?.availableBalance }}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'user.mobile'|translate}}:</span> {{datalist[0]?.mobile}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'user.createTime'|translate}}:</span> {{datalist[0]?.createTime.split(' ')[0]}}
                </div>
            </div>
            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'user.level'|translate}}:</span> {{datalist[0]?.level === 'vip' ? userLevel.vip:userLevel.normal}}
				</div>
				<div nz-col class="gutter-row" nzSpan="8" *ngIf="datalist[0]?.level === 'vip'">
                    <span>{{'user.vipExpireTime'|translate}}:</span> {{datalist[0]?.vipExpireTime ? datalist[0]?.vipExpireTime.split(' ')[0] : '--'}}
                </div>
            </div>
        </div>
    </nz-modal>
</div>